import React from 'react'
import {Modal,Form, Input, message} from 'antd'
import{UserOutlined,MailOutlined,SafetyOutlined,PhoneOutlined } from '@ant-design/icons';
//引入connect用于连接UI组件与redux
import {connect} from 'react-redux'
import { updateUserActionAsync,LoadUserActionAsync } from '../../../redux/action/userAction';
function UpdateUser(props) {
  const [params,setParams] = React.useState({})
  const [userOne,setUserOne] = React.useState({})
  const handleParams=()=>{
    props.userList.map((val,i)=>{
      if(val.key===props.selectedRowKey[0])
      {
        userUpdateForm.setFieldsValue(val)
        setUserOne(val)
        setParams({avatar:val.avatar,key:val.key})
      }
      return null
    })
  }
  const [userUpdateForm]=Form.useForm()
  React.useEffect(() => {
    handleParams()
  },[props.selectedRowKey])
  return (
    <div>
      <Modal 
        title="编辑用户信息" 
        visible={props.visible} 
        onOk={async ()=>{
          let fieldsValue = await userUpdateForm.validateFields()
          fieldsValue = {...fieldsValue,...params}
          props.updateUserActionAsync({...userOne,...fieldsValue})
          props.LoadUserActionAsync()
          props.close()
          message.success('修改成功!')
        }} 
        onCancel={props.close}
        okText='确定'
        cancelText='取消'
        >
        <Form  
          layout="horizontal"
          form={userUpdateForm}
          name="userUpdateForm"
        >
          <Form.Item
            name="username"
            label="电话"
            rules={[
              {
                pattern:/^\d{11}$/,
                message: '请输入11个数字!',
              },
              {
                required: true,
                message: '请输入电话!',
              },
            ]}
          >
            <Input prefix={<PhoneOutlined />} placeholder='电话'/>
          </Form.Item>
          <Form.Item
            name="password"
            label="密码"
            rules={[
              {
                pattern:/\w{6,20}/gi,
                message: '请输入6-20个字符！',
              },
              {
                required: true,
                message: '请输入密码',
              },
            ]}
          >
            <Input.Password prefix={<SafetyOutlined />} placeholder='密码' />
          </Form.Item>
          <Form.Item
            name="email"
            label="邮箱"
            rules={[
              {
                type:'email',
                message: '请输入正确的邮箱格式!',
              },
              {
                required: true,
                message: '请输入邮箱',
              },
            ]}
          >
            <Input prefix={<MailOutlined />} placeholder='邮箱' />
          </Form.Item>
          <Form.Item
            name="name"
            label="姓名"
            rules={[
              {
                min:2,
                message: '请输入大于等于2个字符！',
              },
              {
                required: true,
                message: '请输入姓名',
              },
            ]}
          >
            <Input prefix={<UserOutlined />} placeholder='姓名' />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}
//使用connect()()创建并暴露一个Count的容器组件
export default connect(
	state => ({
    userList:state.userList
	}),
	{updateUserActionAsync,LoadUserActionAsync}
)(UpdateUser)

